<template>
  <div>
    社保
    <hr>
    <h3>tree组件</h3>
    <pre>
      组件名:el-tree
                data:树形数据
                props:{
                  label:'label',
                  children:'children'
                }
                作用域插槽 node:组件提供的数据信息  data:当前项的data数据
                自定义树形控件每一项的内容
     需求：广东省城市数据
          广东
             广州
               白云区
               天河区
             深圳
               南山
               宝安区
                 石岩
    </pre>
    <hr>
    <el-tree :data="treeData" :props="{ label: 'name', children: 'child' }">
      <template v-slot="scope">
        <div>
          <span>{{ scope.data.name }}</span>
          <button @click="btnClick(scope)">查看scope</button>
        </div>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '广东',
          child: [
            {
              name: '广州',
              child: [{ name: '白云区' }, { name: '天河区' }]
            },
            {
              name: '深圳',
              child: [
                { name: '南山区' },
                { name: '宝安区', child: [{ name: '石岩' }] }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    btnClick(scope) {
      console.log(scope)
    }
  }
}
</script>
<style></style>
